
"use client";
import React, { useEffect, useState } from "react";
import { BlogPostProps } from "@/lib/getBlogPosts";
import ErrorBoundary from "./ErrorBoundary";

const MdDetail: React.FC<{
  mdFile?: BlogPostProps;
}> = ({ mdFile }) => {

  // 根据路由名称匹配
  if (!mdFile) {
    return (
      <div className="container mx-auto px-4 py-8 text-center">
        Error: md file is missing
      </div>
    );
  }

  const renderHTMLContent = () => {
    if (!mdFile.htmlContent) {
      return <div className="text-red-500">Error: HTML content is missing</div>;
    }

    return (
      <div
        style={{ maxWidth: 'inherit' }}
        className="prose lg:prose-xl"
        dangerouslySetInnerHTML={{ __html: mdFile.htmlContent }}
      />
    );
  };

  return (
    <div>
      <div>
        <ErrorBoundary fallback={<div>Error loading post content</div>}>
          {renderHTMLContent()}
        </ErrorBoundary>
      </div>
    </div>
  );
};

export default MdDetail;
